<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j page-weixin-pay">
    <div class="content">
      <div class="weixin-pay-info">
        <div class="item">
          <div class="tip-text">
            {{ $t('payment.orderSubmittedSuccessfully') }}！
          </div>
          <div class="act-pay">
            {{ $t('payment.actualPayment') }}：
            <span class="price">￥{{ total }}</span>
          </div>
        </div>
        <div class="item">
          <div
            v-if="isOverTime && $t('language') === 'zh_CN'"
            class="time"
          >
            请在
            <span class="warning">{{ min }} : {{ sec }}</span>内付款，否则交易会被取消。
          </div>
          <div
            v-if="isOverTime && $t('language') !== 'zh_CN'"
            class="time"
          >
            please pay within
            <span class="warning">{{ min }} : {{ sec }}</span>，otherwise the transaction will be cancelled。
          </div>
          <div
            v-if="!isOverTime"
            class="time"
          >
            {{ $t('payment.orderHasExpired') }}
          </div>
          <div
            class="back-pay"
            @click="checkOtherPayWay"
          >
            {{ $t('payment.chooseAnotherPaymentMethod') }}
          </div>
        </div>
      </div>
      <weixin-pay-code
        v-if="weixinCodeUrl !== ''"
        :is-show-code-mask="isShowCodeMask"
        :weixin-code-url="weixinCodeUrl"
      />
      <alipay-code
        v-if="alipayCodeUrl !== ''"
        :is-show-code-mask="isShowCodeMask"
        :alipay-code-url="alipayCodeUrl"
      />
    </div>
  </div>
</template>

<script setup>
import weixinPayCode from '@/components/weixin-pay-code/index.vue'
const router = useRouter()
const route = useRoute()
let orderNumber = ''
let paySettlementType = 0 // 是否为通联支付 1：通联支付 0：非通联支付
let payType = null
const alipayCodeUrl = ref('') // 支付宝二维码数据

onMounted(() => {
  payType = Number(route.query.payType)
  orderNumber = sessionStorage.getItem('bbcPay_orderNumber')
  paySettlementType = localStorage.getItem('bbcPaySettlementType') ? JSON.parse(localStorage.getItem('bbcPaySettlementType')).paySettlementType : 0
  getPayCode()
  // wxPayCode()
  getEndTime()
  isPay()
})
let timer = null
let checkIsPay = null
onUnmounted(() => {
  if (timer) { // 如果定时器在运行则关闭
    clearInterval(timer)
  }
  if (checkIsPay) { // 如果定时器在运行则关闭
    clearInterval(checkIsPay)
  }
})

// 请求订单剩余时间
const total = ref(0)
let endTime = ''
const getEndTime = () => {
  http.get('/p/order/getOrderPayInfoByOrderNumber', {
    params: {
      orderNumbers: orderNumber
    }
  }).then(({ data }) => {
    total.value = data.totalFee
    endTime = data.endTime
    countTime()
  })
}

// 倒计时
const isOverTime = ref(true)
const min = ref('00')
const sec = ref('00')
const isShowCodeMask = ref(false) // 二维码是否过期
const countTime = () => {
  // 获取当前时间
  const date = new Date()
  const now = date.getTime()

  // // 设置截止时间
  const end = new Date(endTime).getTime()
  // 时间差
  const leftTime = end - now
  // 定义变量 d,h,m,s保存倒计时的时间
  if (leftTime >= 0) {
    // 分
    const m = Math.floor(leftTime / 1000 / 60 % 60)
    min.value = m < 10 ? '0' + m : m
    // 秒
    const s = Math.floor(leftTime / 1000 % 60)
    sec.value = s < 10 ? '0' + s : s
  } else {
    min.value = '00'
    sec.value = '00'
    isOverTime.value = false
  }
  // 等于0的时候不调用
  if (Number(min.value) === 0 && Number(sec.value) === 0) {
    isShowCodeMask.value = true
    isOverTime.value = false
    return isOverTime.value
  } else {
    // 递归每秒调用countTime方法，显示动态时间效果,
    timer = setTimeout(countTime, 1000)
  }
}

// 选择其他支付方式
const checkOtherPayWay = () => {
  router.push({ path: '/payment' })
}

// 生成微信支付二维码
const weixinCodeUrl = ref('') // 微信二维码数据
const getPayCode = () => {
  http.post('/p/order/pay', {
    payType,
    orderNumbers: orderNumber,
    systemType: 1,
    allinPaySystemType: paySettlementType === 1 ? 2 : undefined
  }).then(({ data }) => {
    nextTick(function () {
      if (paySettlementType === 1) {
        if (payType === 3) {
          weixinCodeUrl.value = data.payInfo
        } else {
          alipayCodeUrl.value = data.payInfo
        }
        return
      }
      weixinCodeUrl.value = data
    })
  })
}

// 判断是否已经支付
const isPay = () => {
  checkIsPay = window.setInterval(() => {
    http.get('/p/order/isPay/0/' + orderNumber).then(({ data }) => {
      if (data) {
        router.push({
          path: '/user-center/uc-order'
        })
      }
    })
  }, 3000)
}

</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
